﻿@{
    ViewBag.Title = "ShowMdItemTypeIndex";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
   <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="typeName" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <select id="stauct">
                <option value="">请选择</option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
            </div>
            <button type="button" id="getMdItemType" class="layui-btn layui-bg-blue">搜索</button>
            <button type="reset" id="restMdItemType" class="layui-btn">重置</button>
        </div>
        <table class="layui-hide" id="MdItemType" lay-filter="test">
        </table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
    </form>

    <!-- 引入 layui.js -->
     <script src="~/libs/jquery/jquery.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
    <script>

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格

            showMdItemType = function () {
                layui.use(function () {
                    // 创建表格实例
                    table.render({
                        elem: '#MdItemType',
                        url: 'https://localhost:44311/api/app/md-item-type/products', // 此处为静态模拟数据，实际使用时需换成真实接口
                        where: {
                            typeName: $("#typeName").val(),
                            stauct: $("#stauct").val()
                        },
                        cols: [[
                            { field: 'TypeName', title: '分类' }, 
                            { field: 'OrderNum', title: '排序'},
                            { field: 'TypeItem', title: '物料/产品' },
                            { field: 'IsEnable', title: '是否启用' },
                            { fixed: "right", title: '操作', align: 'center', toolbar: '#barDemo' }
                        ]],
                        done: function () {
                            layer.msg('物料分类展示完毕!', {
                                icon: 1,
                                time: 1000
                            })
                        }
                    });
                });
            }
            showMdItemType();

            $("#getMdItemType").on("click", function () {
                showMdItemType();
            })
            $("#restMdItemType").on("click", function () {
                showMdItemType();
            })
        });
    </script>

</body>
</html>